<template>
  <div class="getcoupon">
    <!-- 头部导航 -->
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="returnBefore"
      fixed
    />

    <!-- 中间内容 -->
    <div class="wraper">
      <div class="coupon-top-wraper">
        <div class="top-ico clearfix">
          <span class="union-ico"></span>
          <span class="hq-ico"></span>
        </div>

        <div class="coupon-brief">
          <div class="coupon-ico">
            <img
              v-if="array1[0]"
              :src="array1[0].coupon_ico_path"
              alt=""
            />
          </div>
          <div class="coupon-name">{{ array1[0] ? array1[0].coupon_name : '' }}</div>
          <div class="coupon-discounts">{{ array1[0] ? array1[0].coupon_explain : '' }}</div>
          <div class="coupon-time">
            活动时间：{{ parseInt(array1[0] ? array1[0].coupon_starttime : '') | dataFormat('YYYY-MM-DD hh:mm:ss') }} 至
            {{ parseInt(array1[0] ? array1[0].coupon_endtime : '') | dataFormat('YYYY-MM-DD hh:mm:ss') }}
          </div>
        </div>
      </div>

      <div class="coupon-bottom-wraper">
        <column-yhq></column-yhq>
        <column-rule-wrap></column-rule-wrap>

        <div class="comment-wraper">
          <div class="column-divide-wraper"></div>
          <Comment :id="id"></Comment>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import Comment from '@/components/dx/Comment';
import columnRuleWrap from '@/components/dx/column-rule-wrap';
import columnYhq from '@/components/dx/column-yhq';
import Tabbar from '@/components/tabbar';
import { getCoupon } from '@/api';
import { mapState, mapMutations } from 'vuex';
export default {
  created() {
    this.id = this.$route.params.id;
    this.getCoupon(this.id);
  },
  computed: {
    ...mapState('getCoupon', ['obj1']),
    params() {
      console.log(this.obj1)
      return JSON.parse(JSON.stringify(this.obj1));
    },
  },
  watch: {
    params(newValue) {
      console.log('监听深拷贝', newValue);
    },
  },
  components: {
    Comment,
    columnRuleWrap,
    columnYhq,
    Tabbar,
  },
  data() {
    return {
      title: this.$route.meta.title,
      active: this.$route.meta.active,
      id: '',
      array1: [],
    };
  },
  methods: {
    ...mapMutations({
      returnBefore: {
        type: 'returnBefore/returnBefore',
      },
    }),
    async getCoupon(id) {
      const res = await getCoupon(id);
      this.array1 = res.data.message;
      // console.log(this.array1);
    },
    change(oldval, newval) {
      console.log(1);
      this.array1.unshift(newval);
    },
  },
};
</script>
<style lang="scss">
.van-nav-bar {
  .van-nav-bar__left {
    padding: 0;
  }
  .van-nav-bar__arrow {
    font-size: 25px;
    color: #333;
  }
  .van-nav-bar__title {
    font-size: 18px;
  }
}

.wraper {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  padding: 45px 0 80px 0;
  overflow: hidden;

  .coupon-top-wraper {
    width: 94%;
    margin: 2% 3%;
    position: relative;
    height: 213px;
    background: #23a1df;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    .top-ico {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    .clearfix {
      display: block;
      height: 0;
      clear: both;
      content: '';
    }
    .union-ico {
      width: 40px;
      height: 26px;
      float: left;
      margin: 10px 0 0 10px;
      background-image: url(./images/yinglian.png);
      background-size: 40px 26px;
      background-repeat: no-repeat;
    }
    .hq-ico {
      width: 83px;
      height: 17px;
      float: right;
      margin: 10px 10px 0 0;
      background-image: url(./images/citie.png);
      background-size: 83px 17px;
      background-repeat: no-repeat;
    }

    .coupon-brief {
      position: absolute;
      top: 45px;
      left: 0;
      width: 100%;
      text-align: center;
      line-height: 25px;
      font-size: 14px;
      color: #fff;

      .coupon-ico {
        width: 79px;
        height: 79px;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .coupon-bottom-wraper {
    width: 94%;
    margin: 2% 3%;
    overflow: hidden;
    padding-top: 15px;
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}

.van-tabbar-item {
  .van-tabbar-item__text {
    font-size: 14px;
  }
}
</style>
